<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="../common/vue.min.js" type="text/javascript"></script>
    <style type="text/css">

    </style>
</head>
<body>
<!--view-->


<div id="div_test">
    <button v-on:click="greet">greet!!!</button>

    内嵌函数：限定一个事件处理器限制为一个语句。
    <button v-on:click="say('hi')">btn1</button>
    <hr/>

    <button v-on:click="say('hi',$event)">btn1</button>

    <hr/>
    event.preventDefault() 或 event.stopPropagation()
    <button v-on:click.prevent="greet">greet!!!</button>

    <form v-on:submit.prevent="onSubmit"></form>

    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="doThat"></a>

    <hr/>

    按键修饰符：

    <input type="text" v-on:keyup.13="say2('keyup:13',$event)" />
    <input type="text" v-on:keyup.enter="say2('keyup:13',$event)" />
    <input type="text" @keyup.enter="say2('keyup:13-123',$event)" />


</div>


<script type="text/javascript">


    var vm = new Vue({
        el: "#div_test",
        data: {
            items: [
                {message: 'li1', uid: 001},
                {message: 'li2', uid: 002}
            ],
            object: {
                key1: "hello",
                key2: "world",
                key3: "for alls"
            },
            functionName: "greet_func"
        },
        methods: {
            greet: function (event) {
                //方法内this指向vm
                alert(this.functionName);
                console.log(event);
                console.log(event.target);
                console.log(event.target.name);
            },
            say: function (msg, event) {
                event.preventDefault();
                alert(event.target);
                alert(msg);
            },
            say2: function (msg, event) {
                alert(event.target);
                alert(msg);
            }
        }
    })

    vm.items.push({message: "li3"});

    vm.items = vm.items.filter(function (item) {
        console.log(item);
        return item.message
    })
    vm.items.push({message: 'li4', uid: 001})
    vm.items.push({message: 'li1', uid: 001})


</script>

</body>
</html>